<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>知乎页面</title>
		<link rel="stylesheet" href="../css/zhihu.css"/>
	</head>
	<body>
		<div class="header">
			<div class="top">
				<div class="top-content">
					<a>
						<svg viewBox="0 0 64 30" fill="#1772F6" width="64" height="30" class="css-1hlrcxk"><path d="M29.05 4.582H16.733V25.94h3.018l.403 2.572 4.081-2.572h4.815V4.582zm-5.207 18.69l-2.396 1.509-.235-1.508h-1.724V7.233h6.78v16.04h-2.425zM14.46 14.191H9.982c0-.471.033-.954.039-1.458v-5.5h5.106V5.935a1.352 1.352 0 0 0-.404-.957 1.378 1.378 0 0 0-.968-.396H5.783c.028-.088.056-.177.084-.255.274-.82 1.153-3.326 1.153-3.326a4.262 4.262 0 0 0-2.413.698c-.57.4-.912.682-1.371 1.946-.532 1.453-.997 2.856-1.31 3.693C1.444 8.674.28 11.025.28 11.025a5.85 5.85 0 0 0 2.52-.61c1.119-.593 1.679-1.502 2.054-2.883l.09-.3h2.334v5.5c0 .5-.045.982-.073 1.46h-4.12c-.71 0-1.39.278-1.893.775a2.638 2.638 0 0 0-.783 1.874h6.527a17.717 17.717 0 0 1-.778 3.649 16.796 16.796 0 0 1-3.012 5.273A33.104 33.104 0 0 1 0 28.74s3.13 1.175 5.425-.954c1.388-1.292 2.631-3.814 3.23-5.727a28.09 28.09 0 0 0 1.12-5.229h5.967v-1.37a1.254 1.254 0 0 0-.373-.899 1.279 1.279 0 0 0-.909-.37z"></path><path d="M11.27 19.675l-2.312 1.491 5.038 7.458a6.905 6.905 0 0 0 .672-2.218 3.15 3.15 0 0 0-.28-2.168l-3.118-4.563zM51.449 15.195V5.842c4.181-.205 7.988-.405 9.438-.483l.851-.05c.387-.399.885-2.395.689-3.021-.073-.25-.213-.666-.638-.555a33.279 33.279 0 0 1-4.277.727c-2.766.321-3.97.404-7.804.682-6.718.487-12.709.72-12.709.72a2.518 2.518 0 0 0 .788 1.834 2.567 2.567 0 0 0 1.883.706c2.278-.095 5.598-.25 8.996-.41v9.203h-12.78c0 .703.281 1.377.783 1.874a2.69 2.69 0 0 0 1.892.777h10.105v7.075c0 .887-.464 1.192-1.231 1.214h-3.92a4.15 4.15 0 0 0 .837 1.544 4.2 4.2 0 0 0 1.403 1.067 6.215 6.215 0 0 0 2.71.277c1.36-.066 2.967-.826 2.967-3.57v-7.607h11.28c.342 0 .67-.135.91-.374.242-.239.378-.563.378-.902v-1.375H51.449z"></path><path d="M42.614 8.873a2.304 2.304 0 0 0-1.508-.926 2.334 2.334 0 0 0-1.727.405l-.376.272 4.255 5.85 2.24-1.62-2.884-3.98zM57.35 8.68l-3.125 4.097 2.24 1.663 4.517-5.927-.375-.277a2.32 2.32 0 0 0-1.722-.452 2.327 2.327 0 0 0-1.536.896z"></path></svg>
					</a>
					<ul class="top-list">
						<li class="top-tab">首页</li>
						<li class="top-tab">知乎学堂</li>
						<li class="top-tab">发现</li>
					</ul>
					<div class="top-search">
						<label>
							<input class="top-input" placeholder="这是占位的"/>
							<button type="button" class="top-search-button">
								<span>
									<svg width="18" height="18" viewBox="0 0 24 24" class="Zi Zi--Search SearchBar-searchIcon css-1dlt5yv" fill="currentColor"><path fill-rule="evenodd" d="M11.8 2.425a9.075 9.075 0 1 0 5.62 16.201l2.783 2.783a.875.875 0 1 0 1.238-1.237l-2.758-2.758A9.075 9.075 0 0 0 11.8 2.425ZM4.475 11.5a7.325 7.325 0 1 1 14.65 0 7.325 7.325 0 0 1-14.65 0Z" clip-rule="evenodd"></path></svg>
								</span>
							</button>
						</label>
					</div>
					<div>
						<button class="top-search-submit">提问</button>
					</div>
					<div class="top-userinfo">
						<div>
							<button class="button-info">
								<span>
									<svg width="18" height="18" viewBox="0 0 24 24" class="ZDI ZDI--BellFill24 css-7dgah8" fill="currentColor"><path fill-rule="evenodd" d="M9.723 21.271c0-.42.34-.76.76-.76h3.043a.76.76 0 0 1 0 1.521h-3.043a.76.76 0 0 1-.76-.76Z" clip-rule="evenodd"></path><path d="M11.153 3.115c0-.618.376-1.115.844-1.115.469 0 .845.499.845 1.115v.183c3.997.369 7.012 4.117 7.024 8.515V17.468h.253a.76.76 0 1 1 0 1.521H3.891a.76.76 0 0 1 0-1.521h.253V11.813c.011-4.392 3.02-8.137 7.009-8.514v-.184Z"></path></svg>
								</span>
								<div>
									消息
								</div>
							</button>
						</div>
						<div>
							<button class="button-info">
								<span>
									<svg width="18" height="18" viewBox="0 0 24 24" class="ZDI ZDI--ChatBubbleTwoFill24 css-7dgah8" fill="currentColor"><path fill-rule="evenodd" d="M2 11c0 1.79.553 3.45 1.498 4.82L2.6 18.667a.6.6 0 0 0 .751.753l3.07-.96A8.5 8.5 0 1 0 2 11Zm11.46 9.414c-.457.16-.506.794-.034.904A6.96 6.96 0 0 0 15 21.5c1.148 0 2.422-.31 3.444-.912.357-.217.658-.378 1.043-.252l1.414.42c.357.112.679-.168.574-.546l-.47-1.57a.736.736 0 0 1 .05-.632c.602-1.108.945-2.32.945-3.498 0-1.07-.248-2.11-.7-3.046-.21-.435-.815-.25-.872.23-.47 3.954-3.211 7.394-6.968 8.72Z" clip-rule="evenodd"></path></svg>
								</span>
								<div>
									私信
								</div>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				哈哈，这是哈哈
			</div>
		</div>
		<div class="desc-tab">
			<div class="desc-tab-header">
				<div class="desc-tab-header-main">
					<span class="tag-content">
						<div>美国</div>
						<div>美国</div>
						<div>美国</div>
					</span>
					<div class="desc-content">
						<div class="desc-content-title">
							美国和英国对也门胡塞武装目标发动空袭哪些信息值得关注？
						</div>
						<div class="desc-content-data show">
							<span>
								当地时间12日凌晨，胡塞武装控制多地遭美军空袭，首都萨那、荷台达市内可以听见爆炸声。 美国官员当地时间11日表示，美国和英国开始对也门境内与胡塞武装有…
							</span>
							<button class="desc-content-show">
								显示全部
								<span>
									<svg width="24" height="24" viewBox="0 0 24 24" class="Zi Zi--ArrowDown" fill="currentColor"><path fill-rule="evenodd" d="M17.776 10.517a.875.875 0 0 1-.248 1.212l-5.05 3.335a.875.875 0 0 1-.964 0L6.47 11.73a.875.875 0 1 1 .965-1.46l4.56 3.015 4.568-3.016a.875.875 0 0 1 1.212.248Z" clip-rule="evenodd"></path></svg>
								</span>
							</button>
						</div>
						<div class="desc-content-data hide">
							<span>
								当地时间12日凌晨，胡塞武装控制多地遭美军空袭，首都萨那、荷台达市内可以听见爆炸声。</p><p>美国官员当地时间11日表示，美国和英国开始对也门境内与胡塞武装有关的目标实施打击。
							</span>
							<button class="desc-content-show">
								收起
								<span>
									<svg width="24" height="24" viewBox="0 0 24 24" class="Zi Zi--ArrowUp" fill="currentColor"><path fill-rule="evenodd" d="M11.522 8.94a.875.875 0 0 1 .964 0l5.043 3.333a.875.875 0 0 1-.965 1.46l-4.56-3.014-4.568 3.015a.875.875 0 1 1-.964-1.46l5.05-3.334Z" clip-rule="evenodd"></path></svg>
								</span>
							</button>
						</div>
						<div class="desc-content-button">
							<div class="wirte">
								<button class=follow-question>关注问题</button>
								<button class="wirte-result">
									<span class="span" >
										<svg width="16" height="16" viewBox="0 0 24 24" class="Zi Zi--Edit QuestionButton-icon" fill="currentColor"><path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z"></path></svg>
									</span>
									写回答
								</button>
							</div>
							<div class="plaese">
								<button class="yaoqinghuida">
									<span>
										<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--Invite Button-zi t2ntD6J1DemdOdvh5FB4" fill="currentColor"><path fill-rule="evenodd" d="M5.5 7.5A5.5 5.5 0 0 1 11 2a5.5 5.5 0 0 1 5.5 5.5A5.5 5.5 0 0 1 11 13a5.5 5.5 0 0 1-5.5-5.5Zm8.11 9.498c.404-.408.91-1 1.17-1.51.067-.133.13-.284.165-.442.034-.15.058-.373-.033-.602a.872.872 0 0 0-.545-.509 1.37 1.37 0 0 0-.604-.043c-.657.082-1.518.184-2.373.24-.867.055-1.68.058-2.254-.041-1.189-.204-2.045-.19-2.781.087-.722.272-1.25.773-1.804 1.302-1.533 1.462-2.434 3.311-2.65 4.831-.11.78.535 1.339 1.199 1.339h8.1a.96.96 0 0 0 .955-.929c.06-1.767.7-2.96 1.456-3.723Zm5.596-2.292a.706.706 0 0 0-1.412 0v2.588h-2.588a.706.706 0 0 0 0 1.412h2.588v2.588a.706.706 0 1 0 1.412 0v-2.588h2.588a.706.706 0 0 0 0-1.412h-2.588v-2.588Z" clip-rule="evenodd"></path></svg>
									</span>
									邀请回答
								</button>
								<button class="other">
									<span>
										<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--Comment Button-zi t2ntD6J1DemdOdvh5FB4" fill="currentColor"><path fill-rule="evenodd" d="M12 2.75a9.25 9.25 0 1 0 4.737 17.197l2.643.817a1 1 0 0 0 1.25-1.25l-.8-2.588A9.25 9.25 0 0 0 12 2.75Z" clip-rule="evenodd"></path></svg>
									</span>
									添加评论
								</button>
								<button class="other">
									<span>
										<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--Share Button-zi t2ntD6J1DemdOdvh5FB4" fill="currentColor"><path d="M19.47 1.914a.8.8 0 0 1 1.204.778l-1.872 16.386a.9.9 0 0 1-1.204.743l-4.615-1.692a.7.7 0 0 0-.831.28l-1.927 3.02c-.43.674-1.474.369-1.474-.43v-3.865a.8.8 0 0 1 .179-.504l5.808-7.148a.595.595 0 0 0-.897-.781l-5.93 6.354a1.1 1.1 0 0 1-1.258.252L2.57 13.46a.8.8 0 0 1-.08-1.415l16.98-10.13Z"></path></svg>
									</span>
									分享
								</button>
								<button class="other">
									<span>
										<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--Dots Button-zi t2ntD6J1DemdOdvh5FB4" fill="currentColor"><path d="M6 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM10.5 12a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 12a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"></path></svg>
									</span>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="desc-tab-header-side">
					<div class="desc-tab-follow">
						<div style="border-right: 1px solid black;">
							<div>关注者</div>
							<strong>11</strong>
						</div>
						<div>
							<div>被浏览</div>
							<strong>48</strong>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main-context">
			<div class="content-left">
				<div class="first-div">
					<div class="content-left-toolbar">
						<div>
							<span>
								<svg width="20" height="20" viewBox="0 0 24 24" class="Zi Zi--LabelSpecial css-7c4y9j" fill="currentColor"><path fill-rule="evenodd" d="M7.6 2.5A1.6 1.6 0 0 0 6 4.1V9H4.8a2.3 2.3 0 0 0-2.3 2.3V19A2.5 2.5 0 0 0 5 21.5h14a2.5 2.5 0 0 0 2.5-2.5V4.1a1.6 1.6 0 0 0-1.6-1.6H7.6ZM5 20a1 1 0 0 0 1-1v-8.5H4.8a.798.798 0 0 0-.8.8V19a1 1 0 0 0 1 1ZM9.5 6.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5h-8Zm0 9a.75.75 0 0 0 0 1.5H14a.75.75 0 0 0 0-1.5H9.5Zm-.75-3.75a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg>
							</span>
							最新进展   ·   红海航道危机
						</div>
					</div>
					<div class="content-left-time">
						<a class="content-left-time-first-a">
							<div class="time">2024/01/13 14:13</div>
							<div class="content-left-time-content">
								<div>胡塞驳斥美空袭也门多地是「自卫」的说法，抨击美英空袭胡塞武装是在发动「侵略」</div>
								<span>
									<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--ArrowRight css-1kakj5b" fill="currentColor"><path fill-rule="evenodd" d="M10.518 6.224a.875.875 0 0 1 1.212.248l3.335 5.05a.875.875 0 0 1 0 .964l-3.334 5.043a.875.875 0 0 1-1.46-.965l3.015-4.56-3.016-4.568a.875.875 0 0 1 .248-1.212Z" clip-rule="evenodd"></path></svg>
								</span>
							</div>
						</a>
						<a class="content-left-time-no-first-a">
							<div class="time">2024/01/13 14:13</div>
							<div class="content-left-time-content">
								<div>胡塞驳斥美空袭也门多地是「自卫」的说法，抨击美英空袭胡塞武装是在发动「侵略」</div>
								<span>
									<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--ArrowRight css-1kakj5b" fill="currentColor"><path fill-rule="evenodd" d="M10.518 6.224a.875.875 0 0 1 1.212.248l3.335 5.05a.875.875 0 0 1 0 .964l-3.334 5.043a.875.875 0 0 1-1.46-.965l3.015-4.56-3.016-4.568a.875.875 0 0 1 .248-1.212Z" clip-rule="evenodd"></path></svg>
								</span>
							</div>
						</a>
						<a class="content-left-time-no-first-a">
							<div class="time">2024/01/13 14:13</div>
							<div class="content-left-time-content">
								<div>胡塞驳斥美空袭也门多地是「自卫」的说法，抨击美英空袭胡塞武装是在发动「侵略」</div>
								<span>
									<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--ArrowRight css-1kakj5b" fill="currentColor"><path fill-rule="evenodd" d="M10.518 6.224a.875.875 0 0 1 1.212.248l3.335 5.05a.875.875 0 0 1 0 .964l-3.334 5.043a.875.875 0 0 1-1.46-.965l3.015-4.56-3.016-4.568a.875.875 0 0 1 .248-1.212Z" clip-rule="evenodd"></path></svg>
								</span>
							</div>
						</a>
						<a class="content-left-time-no-first-a">
							<div class="time">2024/01/13 14:13</div>
							<div class="content-left-time-content">
								<div>胡塞驳斥美空袭也门多地是「自卫」的说法，抨击美英空袭胡塞武装是在发动「侵略」</div>
								<span>
									<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="Zi Zi--ArrowRight css-1kakj5b" fill="currentColor"><path fill-rule="evenodd" d="M10.518 6.224a.875.875 0 0 1 1.212.248l3.335 5.05a.875.875 0 0 1 0 .964l-3.334 5.043a.875.875 0 0 1-1.46-.965l3.015-4.56-3.016-4.568a.875.875 0 0 1 .248-1.212Z" clip-rule="evenodd"></path></svg>
								</span>
							</div>
						</a>
					</div>
					<div class="first-div-zhankai">
						<a>展开全部
							<span>
								<svg width="24" height="24" viewBox="0 0 24 24" class="Zi Zi--ArrowDown" fill="currentColor"><path fill-rule="evenodd" d="M17.776 10.517a.875.875 0 0 1-.248 1.212l-5.05 3.335a.875.875 0 0 1-.964 0L6.47 11.73a.875.875 0 1 1 .965-1.46l4.56 3.015 4.568-3.016a.875.875 0 0 1 1.212.248Z" clip-rule="evenodd"></path></svg>
							</span>
						</a>
					</div>
				</div>
				<div class="huida-context">
					<div class="huida-context-first-div">
						<a>1412个回答</a>
						<button>
							默认回答
							<span>
								<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="ZDI ZDI--ArrowUpDown24 Select-arrow RXYxRcvJ7zVIfNZSOcHa" fill="currentColor"><path fill-rule="evenodd" d="M12.53 3.47a.75.75 0 0 0-1.06 0l-5 5a.75.75 0 0 0 1.06 1.06L12 5.06l4.47 4.47a.75.75 0 1 0 1.06-1.06l-5-5Zm-5 11a.75.75 0 0 0-1.06 1.06l5 5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06L12 18.94l-4.47-4.47Z" clip-rule="evenodd"></path></svg>
							</span>
						</button>
					</div>
					<div class="huida-text-area">
						<div class="huida-text-area-author-info">
							<div class="child-left ">
								<img src="../img/v2-24049a70768099c11707703171d48634_l.png">
								<a>这是网名</a>
							</div>
							<button class="child-right">
								<span>
									<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="ZDI ZDI--PlusFill24" fill="currentColor"><path fill-rule="evenodd" d="M13.25 3.25a1.25 1.25 0 1 0-2.5 0v7.5h-7.5a1.25 1.25 0 1 0 0 2.5h7.5v7.5a1.25 1.25 0 1 0 2.5 0v-7.5h7.5a1.25 1.25 0 0 0 0-2.5h-7.5v-7.5Z" clip-rule="evenodd"></path></svg>
								</span>
								关注
							</button>
						</div>
						<div>
							
						</div>
					</div>
				</div>
			</div>
			<div class="content-side">
				<a>
					
				</a>
			</div>
		</div>
		
		<div class="search-list">
			<div class="search-list-top">
				<a>搜索发现</a>
				<div class="horizontal-line"></div>
			</div>
			<ul class="search-list-result">
				<li>搜索结果11111</li>
				<li>搜索结果22222</li>
				<li>搜索结果33333</li>
			</ul>
		</div>
		
		
	
	
		
		<script>
			
			
			window.addEventListener('scroll', function () {
			  var showDiv = document.getElementsByClassName('top');
			  var hideDiv = document.getElementsByClassName('content');
			
			  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
			
				console.log(scrollPosition)
			  if (scrollPosition > 300) {
			    showDiv[0].style.display = 'none';
			    hideDiv[0].style.display = 'block';
			  } else {
			    showDiv[0].style.display = 'block';
			    hideDiv[0].style.display = 'none';
			  }
			});
			
		
			let dom=document.getElementsByClassName('top-input')[0];
			let searchList=document.getElementsByClassName('search-list')[0];
			dom.addEventListener('click',()=>{
				searchList.style.display = 'block';
				searchList.style.width = dom.offsetWidth +"px";
				searchList.style.left = dom.offsetLeft + "px";
				searchList.style.top = dom.offsetTop + dom.offsetHeight+ 10 + "px";
			})
			
		   document.addEventListener('click', function(event) {
				 var targetElement = event.target;
				 if (targetElement !== dom && targetElement !== searchList) {
					searchList.style.display = 'none';
				 }
			});
		
			
		</script>
	</body>
</html>